import React, { Component } from 'react';
import { View, Text, StyleSheet, AsyncStorage } from 'react-native';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';

import BaseStyle from '../constants/Style';
import Btn from '../components/buttons';
import DilogModal from '../components/dilogModal';
import TouchID from 'react-native-touch-id'

export default class LoginScreen extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      DilogModal: false,
    };
  }

  handlogin = () => {
    // this.setState({ DilogModal: true });
    const optionalConfigObject = {
      title: "Authentication Required", // Android
      color: "#e00606", // Android
      sensorDescription: "Touch sensor", // Android
      cancelText: "Cancel", // Android
       fallbackLabel: "其他登录方式", // iOS (if empty, then label is hidden)
      unifiedErrors: false // use unified error messages (default false)
    }
    TouchID.authenticate('通过Home键验证已有手势指纹', optionalConfigObject)
      .then(success => {
        this.rightOption_()
      })
      .catch(error => {   

        /*这里出错的坑：
        当指纹识别失败次多过多时，大概6次吧，会返回设备不支持的错误 RCTTouchIDNotSupported
          解决：我们可以通过判断设备支持指纹识别的前提下，如果报这个错误就提示用户次数超限，通过其他方式登录

        切换密码输入的时候也会回调到这个错误，但是可以参考错误信息，返回的错误信息是  LAErrorUserCancel
        */

         alert(JSON.stringify(error))
          // alert('指纹识别失败');
      });
  };
  rightOption_ = () => {
    const { navigation } = this.props;
    this.setState({ DilogModal: false });
    AsyncStorage.multiSet([['token', '123'], ['userId', '123']]);
    toast('恭喜您登录成功');

    navigation.navigate('Auth');
  };

  render() {
    const {
      navigation: { navigate },
    } = this.props;
    return (
      <SafeAreaView style={BaseStyle.flex} forceInset={{ top: 'never' }}>
        <DilogModal
          DilogModal={this.state.DilogModal}
          text={'确定要登录吗？'}
          leftOPtion={() => {
            this.setState({ DilogModal: false });
          }}
          rightOption={() => {
            this.rightOption_();
          }}
        />
        <View style={styles.container}>
          <Text>你还没有登录</Text>
          <Btn
            text={'指纹识别登录'}
            btnStyle={styles.btnStyles}
            onPress={() => {
              this.handlogin();
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    ...BaseStyle.flex,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    backgroundColor: '#fff',
  },
  btnStyles: {
    marginTop: 40,
  },
});
